// 智能文档管理系统 - 原型交互脚本

// 全局变量
let currentPage = 'dashboard';
let searchSuggestionsTimeout;

// 模拟数据
const mockData = {
    documents: [
        {
            id: 1,
            title: "MMC项目投标书技术方案.pdf",
            type: "pdf",
            size: "2.3 MB",
            project: "MMC项目",
            tags: ["技术方案", "投标", "医疗设备"],
            description: "国家标准化代谢性疾病管理中心项目技术实施方案，包含设备选型和部署规划。",
            updateTime: "2小时前",
            usageCount: 15
        },
        {
            id: 2,
            title: "欧姆龙血压计产品介绍.pptx",
            type: "ppt",
            size: "8.7 MB",
            project: "设备采购",
            tags: ["产品介绍", "血压计", "欧姆龙"],
            description: "欧姆龙医疗器械血压计产品系列详细介绍和技术参数说明。",
            updateTime: "1天前",
            usageCount: 8
        },
        {
            id: 3,
            title: "FMD血流介导血管舒张检测仪说明书.doc",
            type: "doc",
            size: "1.2 MB",
            project: "培训资料",
            tags: ["说明书", "FMD", "检测仪"],
            description: "FMD血流介导血管舒张检测仪操作说明书和维护指南。",
            updateTime: "3天前",
            usageCount: 12
        },
        {
            id: 4,
            title: "培训考试评分标准.docx",
            type: "doc",
            size: "856 KB",
            project: "培训资料",
            tags: ["评分标准", "培训", "考试"],
            description: "MMC项目培训测试评分标准和考核要求详细说明。",
            updateTime: "1周前",
            usageCount: 25
        },
        {
            id: 5,
            title: "项目实施现场照片.jpg",
            type: "img",
            size: "3.4 MB",
            project: "MMC项目",
            tags: ["现场照片", "实施", "记录"],
            description: "MMC项目现场实施过程记录照片，展示设备安装和调试情况。",
            updateTime: "2天前",
            usageCount: 6
        },
        {
            id: 6,
            title: "智众医信SaaS平台介绍.pdf",
            type: "pdf",
            size: "4.1 MB",
            project: "MMC项目",
            tags: ["SaaS平台", "智众医信", "软件"],
            description: "智众医信数字化医院科室管理SaaS平台功能介绍和技术架构。",
            updateTime: "4天前",
            usageCount: 18
        }
    ],
    
    projects: [
        {
            id: 1,
            name: "MMC项目",
            color: "#409EFF",
            description: "国家标准化代谢性疾病管理中心建设项目",
            documentCount: 45,
            memberCount: 8,
            lastUpdate: "2小时前"
        },
        {
            id: 2,
            name: "设备采购",
            color: "#67C23A",
            description: "医疗设备集中采购项目管理",
            documentCount: 23,
            memberCount: 5,
            lastUpdate: "1天前"
        },
        {
            id: 3,
            name: "培训资料",
            color: "#E6A23C",
            description: "员工培训和考核资料管理",
            documentCount: 67,
            memberCount: 12,
            lastUpdate: "3天前"
        }
    ],
    
    searchSuggestions: [
        "FMD血流检测",
        "MMC项目",
        "欧姆龙血压计",
        "培训考试",
        "技术方案",
        "投标书",
        "智众医信",
        "SaaS平台",
        "设备采购",
        "评分标准"
    ]
};

// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
});

// 初始化应用
function initializeApp() {
    setupEventListeners();
    renderDashboard();
    renderDocuments();
    renderProjects();
    updateStats();
    
    console.log('智能文档管理系统原型已初始化');
}

// 设置事件监听器
function setupEventListeners() {
    // 导航菜单点击事件
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
            const page = this.dataset.page;
            showPage(page);
        });
    });
    
    // 全局搜索框事件
    const globalSearch = document.getElementById('globalSearch');
    if (globalSearch) {
        globalSearch.addEventListener('input', handleGlobalSearch);
        globalSearch.addEventListener('focus', showSearchSuggestions);
        globalSearch.addEventListener('blur', hideSearchSuggestions);
    }
    
    // 筛选器事件
    const typeFilter = document.getElementById('typeFilter');
    const projectFilter = document.getElementById('projectFilter');
    if (typeFilter) typeFilter.addEventListener('change', filterDocuments);
    if (projectFilter) projectFilter.addEventListener('change', filterDocuments);
    
    // 视图切换事件
    document.querySelectorAll('.view-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            const view = this.dataset.view;
            toggleDocumentView(view);
        });
    });
    
    // 上传区域事件
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('fileInput');
    
    if (uploadArea && fileInput) {
        uploadArea.addEventListener('click', () => fileInput.click());
        uploadArea.addEventListener('dragover', handleDragOver);
        uploadArea.addEventListener('drop', handleDrop);
        uploadArea.addEventListener('dragleave', handleDragLeave);
        fileInput.addEventListener('change', handleFileSelect);
    }
    
    // 模态框外部点击关闭
    document.querySelectorAll('.modal').forEach(modal => {
        modal.addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.remove('show');
                this.style.display = 'none';
            }
        });
    });
}

// 页面切换
function showPage(pageId) {
    // 更新导航状态
    document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
    });
    document.querySelector(`[data-page="${pageId}"]`).classList.add('active');
    
    // 切换页面内容
    document.querySelectorAll('.page').forEach(page => {
        page.classList.remove('active');
    });
    document.getElementById(pageId).classList.add('active');
    
    currentPage = pageId;
    
    // 页面特定初始化
    switch(pageId) {
        case 'dashboard':
            renderDashboard();
            break;
        case 'documents':
            renderDocuments();
            break;
        case 'projects':
            renderProjects();
            break;
        case 'search':
            initAdvancedSearch();
            break;
    }
}

// 渲染工作台
function renderDashboard() {
    const recentDocuments = document.getElementById('recentDocuments');
    if (!recentDocuments) return;
    
    const recentDocs = mockData.documents.slice(0, 5);
    recentDocuments.innerHTML = recentDocs.map(doc => `
        <div class="document-item" onclick="previewDocument(${doc.id})">
            <div class="document-icon ${doc.type}">
                <i class="fas fa-${getDocumentIcon(doc.type)}"></i>
            </div>
            <div class="document-info">
                <div class="document-title">${doc.title}</div>
                <div class="document-meta">
                    <span><i class="fas fa-clock"></i> ${doc.updateTime}</span>
                    <span><i class="fas fa-eye"></i> ${doc.usageCount}次查看</span>
                    <span><i class="fas fa-hdd"></i> ${doc.size}</span>
                </div>
            </div>
            <div class="document-actions">
                <button class="action-btn" title="预览">
                    <i class="fas fa-eye"></i>
                </button>
                <button class="action-btn" title="下载">
                    <i class="fas fa-download"></i>
                </button>
                <button class="action-btn" title="分享">
                    <i class="fas fa-share"></i>
                </button>
            </div>
        </div>
    `).join('');
}

// 渲染文档列表
function renderDocuments() {
    const documentsGrid = document.getElementById('documentsGrid');
    if (!documentsGrid) return;
    
    documentsGrid.innerHTML = mockData.documents.map(doc => `
        <div class="document-card" onclick="previewDocument(${doc.id})">
            <div class="document-card-header">
                <div class="document-card-icon ${doc.type}">
                    <i class="fas fa-${getDocumentIcon(doc.type)}"></i>
                </div>
                <div class="document-card-title">${doc.title}</div>
            </div>
            <div class="document-card-body">
                <div class="document-tags">
                    ${doc.tags.map(tag => `<span class="tag primary">${tag}</span>`).join('')}
                </div>
                <div class="document-description">${doc.description}</div>
            </div>
            <div class="document-card-footer">
                <span><i class="fas fa-project-diagram"></i> ${doc.project}</span>
                <span><i class="fas fa-clock"></i> ${doc.updateTime}</span>
            </div>
        </div>
    `).join('');
}

// 渲染项目列表
function renderProjects() {
    const projectsGrid = document.getElementById('projectsGrid');
    if (!projectsGrid) return;
    
    projectsGrid.innerHTML = mockData.projects.map(project => `
        <div class="project-card" onclick="showProjectDocuments('${project.name}')">
            <div class="project-card-header">
                <div class="project-card-color" style="background: ${project.color};"></div>
                <div class="project-card-title">${project.name}</div>
            </div>
            <div class="project-card-stats">
                <div class="project-stat">
                    <div class="project-stat-number">${project.documentCount}</div>
                    <div class="project-stat-label">文档</div>
                </div>
                <div class="project-stat">
                    <div class="project-stat-number">${project.memberCount}</div>
                    <div class="project-stat-label">成员</div>
                </div>
                <div class="project-stat">
                    <div class="project-stat-number">5</div>
                    <div class="project-stat-label">标签</div>
                </div>
            </div>
            <div class="project-description">${project.description}</div>
            <div class="project-card-footer">
                <span><i class="fas fa-clock"></i> ${project.lastUpdate}</span>
                <span><i class="fas fa-users"></i> ${project.memberCount}人</span>
            </div>
        </div>
    `).join('');
}

// 更新统计数据
function updateStats() {
    // 这里可以添加统计数据的更新逻辑
    console.log('统计数据已更新');
}

// 获取文档图标
function getDocumentIcon(type) {
    const icons = {
        pdf: 'file-pdf',
        doc: 'file-word',
        ppt: 'file-powerpoint',
        img: 'file-image'
    };
    return icons[type] || 'file';
}

// 全局搜索处理
function handleGlobalSearch(e) {
    const keyword = e.target.value.trim();
    
    if (searchSuggestionsTimeout) {
        clearTimeout(searchSuggestionsTimeout);
    }
    
    searchSuggestionsTimeout = setTimeout(() => {
        if (keyword.length > 0) {
            showSearchSuggestions();
        } else {
            hideSearchSuggestions();
        }
    }, 200);
    
    // 实时搜索结果
    if (keyword.length > 2) {
        performSearch(keyword);
    }
}

// 显示搜索建议
function showSearchSuggestions() {
    const suggestions = document.getElementById('searchSuggestions');
    const searchInput = document.getElementById('globalSearch');
    const keyword = searchInput.value.trim().toLowerCase();
    
    if (suggestions && keyword.length > 0) {
        const filtered = mockData.searchSuggestions.filter(item => 
            item.toLowerCase().includes(keyword)
        );
        
        if (filtered.length > 0) {
            suggestions.innerHTML = filtered.slice(0, 5).map(item => `
                <div class="suggestion-item" onclick="selectSuggestion('${item}')">
                    <i class="fas fa-search"></i> ${item}
                </div>
            `).join('');
            suggestions.style.display = 'block';
        }
    }
}

// 隐藏搜索建议
function hideSearchSuggestions() {
    setTimeout(() => {
        const suggestions = document.getElementById('searchSuggestions');
        if (suggestions) {
            suggestions.style.display = 'none';
        }
    }, 200);
}

// 选择搜索建议
function selectSuggestion(suggestion) {
    const searchInput = document.getElementById('globalSearch');
    if (searchInput) {
        searchInput.value = suggestion;
        hideSearchSuggestions();
        performSearch(suggestion);
    }
}

// 执行搜索
function performSearch(keyword) {
    console.log('搜索关键词:', keyword);
    
    // 过滤文档
    const results = mockData.documents.filter(doc => 
        doc.title.toLowerCase().includes(keyword.toLowerCase()) ||
        doc.description.toLowerCase().includes(keyword.toLowerCase()) ||
        doc.tags.some(tag => tag.toLowerCase().includes(keyword.toLowerCase()))
    );
    
    // 显示搜索结果
    showSearchResults(results, keyword);
    showToast(`找到 ${results.length} 个相关文档`);
}

// 显示搜索结果
function showSearchResults(results, keyword) {
    // 如果不在搜索页面，则切换到搜索页面
    if (currentPage !== 'search') {
        showPage('search');
    }
    
    const searchResults = document.getElementById('searchResults');
    if (!searchResults) return;
    
    if (results.length === 0) {
        searchResults.innerHTML = `
            <div class="no-results">
                <i class="fas fa-search" style="font-size: 48px; color: #c0c4cc; margin-bottom: 16px;"></i>
                <p style="color: #909399;">未找到与 "${keyword}" 相关的文档</p>
            </div>
        `;
        return;
    }
    
    searchResults.innerHTML = `
        <div class="search-results-header">
            <h3>搜索结果 (${results.length})</h3>
            <p>关键词: "${keyword}"</p>
        </div>
        <div class="search-results-list">
            ${results.map(doc => `
                <div class="search-result-item" onclick="previewDocument(${doc.id})">
                    <div class="result-icon ${doc.type}">
                        <i class="fas fa-${getDocumentIcon(doc.type)}"></i>
                    </div>
                    <div class="result-content">
                        <h4 class="result-title">${highlightKeyword(doc.title, keyword)}</h4>
                        <p class="result-description">${highlightKeyword(doc.description, keyword)}</p>
                        <div class="result-meta">
                            <span class="result-project">${doc.project}</span>
                            <span class="result-size">${doc.size}</span>
                            <span class="result-time">${doc.updateTime}</span>
                        </div>
                        <div class="result-tags">
                            ${doc.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                        </div>
                    </div>
                </div>
            `).join('')}
        </div>
    `;
}

// 高亮关键词
function highlightKeyword(text, keyword) {
    if (!keyword) return text;
    const regex = new RegExp(`(${keyword})`, 'gi');
    return text.replace(regex, '<mark>$1</mark>');
}

// 文档筛选
function filterDocuments() {
    const typeFilter = document.getElementById('typeFilter').value;
    const projectFilter = document.getElementById('projectFilter').value;
    
    let filtered = mockData.documents;
    
    if (typeFilter) {
        filtered = filtered.filter(doc => doc.type === typeFilter);
    }
    
    if (projectFilter) {
        const projectMap = {
            'mmc': 'MMC项目',
            'purchase': '设备采购',
            'training': '培训资料'
        };
        filtered = filtered.filter(doc => doc.project === projectMap[projectFilter]);
    }
    
    // 重新渲染文档列表
    const documentsGrid = document.getElementById('documentsGrid');
    if (documentsGrid) {
        documentsGrid.innerHTML = filtered.map(doc => `
            <div class="document-card" onclick="previewDocument(${doc.id})">
                <div class="document-card-header">
                    <div class="document-card-icon ${doc.type}">
                        <i class="fas fa-${getDocumentIcon(doc.type)}"></i>
                    </div>
                    <div class="document-card-title">${doc.title}</div>
                </div>
                <div class="document-card-body">
                    <div class="document-tags">
                        ${doc.tags.map(tag => `<span class="tag primary">${tag}</span>`).join('')}
                    </div>
                    <div class="document-description">${doc.description}</div>
                </div>
                <div class="document-card-footer">
                    <span><i class="fas fa-project-diagram"></i> ${doc.project}</span>
                    <span><i class="fas fa-clock"></i> ${doc.updateTime}</span>
                </div>
            </div>
        `).join('');
    }
    
    showToast(`筛选结果: ${filtered.length} 个文档`);
}

// 切换文档视图
function toggleDocumentView(view) {
    const documentsGrid = document.getElementById('documentsGrid');
    if (!documentsGrid) return;
    
    if (view === 'list') {
        documentsGrid.classList.add('list-view');
        documentsGrid.classList.remove('grid-view');
    } else {
        documentsGrid.classList.add('grid-view');
        documentsGrid.classList.remove('list-view');
    }
}

// 显示项目文档
function showProjectDocuments(projectName) {
    const projectDocs = mockData.documents.filter(doc => doc.project === projectName);
    showPage('documents');
    
    // 设置项目筛选器
    const projectFilter = document.getElementById('projectFilter');
    if (projectFilter) {
        const projectMap = {
            'MMC项目': 'mmc',
            '设备采购': 'purchase',
            '培训资料': 'training'
        };
        projectFilter.value = projectMap[projectName] || '';
        filterDocuments();
    }
    
    showToast(`显示项目"${projectName}"的文档`);
}

// 上传相关函数
function showUploadModal() {
    const modal = document.getElementById('uploadModal');
    if (modal) {
        modal.style.display = 'flex';
        modal.classList.add('show');
    }
}

function hideUploadModal() {
    const modal = document.getElementById('uploadModal');
    if (modal) {
        modal.classList.remove('show');
        setTimeout(() => {
            modal.style.display = 'none';
        }, 300);
    }
}

function handleDragOver(e) {
    e.preventDefault();
    e.currentTarget.classList.add('dragover');
}

function handleDragLeave(e) {
    e.currentTarget.classList.remove('dragover');
}

function handleDrop(e) {
    e.preventDefault();
    e.currentTarget.classList.remove('dragover');
    
    const files = Array.from(e.dataTransfer.files);
    processFiles(files);
}

function handleFileSelect(e) {
    const files = Array.from(e.target.files);
    processFiles(files);
}

function processFiles(files) {
    console.log('选择的文件:', files);
    
    files.forEach(file => {
        console.log(`文件名: ${file.name}, 大小: ${file.size}, 类型: ${file.type}`);
    });
    
    showToast(`已选择 ${files.length} 个文件`);
}

function startUpload() {
    const project = document.getElementById('uploadProject').value;
    const tags = document.getElementById('uploadTags').value;
    
    console.log('开始上传:', { project, tags });
    
    // 模拟上传过程
    showToast('正在上传文档...');
    
    setTimeout(() => {
        showToast('文档上传成功！');
        hideUploadModal();
        // 刷新文档列表
        renderDocuments();
    }, 2000);
}

// 文档预览
function previewDocument(docId) {
    const doc = mockData.documents.find(d => d.id === docId);
    if (!doc) return;
    
    const modal = document.getElementById('previewModal');
    const title = document.getElementById('previewTitle');
    const content = document.getElementById('previewContent');
    
    if (modal && title && content) {
        title.textContent = doc.title;
        content.innerHTML = `
            <div class="preview-placeholder">
                <div class="preview-icon">
                    <i class="fas fa-${getDocumentIcon(doc.type)}" style="font-size: 64px; color: #c0c4cc;"></i>
                </div>
                <h3>${doc.title}</h3>
                <p>${doc.description}</p>
                <div class="preview-meta">
                    <div><strong>项目:</strong> ${doc.project}</div>
                    <div><strong>大小:</strong> ${doc.size}</div>
                    <div><strong>更新时间:</strong> ${doc.updateTime}</div>
                    <div><strong>使用次数:</strong> ${doc.usageCount}</div>
                </div>
                <div class="preview-tags">
                    ${doc.tags.map(tag => `<span class="tag primary">${tag}</span>`).join('')}
                </div>
                <p style="margin-top: 20px; color: #909399; font-size: 14px;">
                    <i class="fas fa-info-circle"></i> 
                    实际开发中，这里将显示文档的实际内容预览
                </p>
            </div>
        `;
        
        modal.style.display = 'flex';
        modal.classList.add('show');
    }
}

function hidePreviewModal() {
    const modal = document.getElementById('previewModal');
    if (modal) {
        modal.classList.remove('show');
        setTimeout(() => {
            modal.style.display = 'none';
        }, 300);
    }
}

function downloadDocument() {
    showToast('开始下载文档...');
}

// 高级搜索
function initAdvancedSearch() {
    // 设置日期默认值
    const today = new Date();
    const oneMonthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
    
    const startDate = document.getElementById('startDate');
    const endDate = document.getElementById('endDate');
    
    if (startDate && endDate) {
        startDate.value = oneMonthAgo.toISOString().split('T')[0];
        endDate.value = today.toISOString().split('T')[0];
    }
}

function performAdvancedSearch() {
    const keyword = document.getElementById('advancedKeyword').value;
    const fileTypes = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    const projects = Array.from(document.getElementById('projectSelect').selectedOptions).map(option => option.value);
    
    console.log('高级搜索参数:', { keyword, fileTypes, startDate, endDate, projects });
    
    // 执行搜索逻辑
    let results = mockData.documents;
    
    if (keyword) {
        results = results.filter(doc => 
            doc.title.toLowerCase().includes(keyword.toLowerCase()) ||
            doc.description.toLowerCase().includes(keyword.toLowerCase())
        );
    }
    
    if (fileTypes.length > 0) {
        results = results.filter(doc => fileTypes.includes(doc.type));
    }
    
    if (projects.length > 0) {
        const projectMap = {
            'mmc': 'MMC项目',
            'purchase': '设备采购',
            'training': '培训资料'
        };
        const selectedProjects = projects.map(p => projectMap[p]);
        results = results.filter(doc => selectedProjects.includes(doc.project));
    }
    
    showSearchResults(results, keyword || '高级搜索');
}

function clearSearchForm() {
    document.getElementById('advancedKeyword').value = '';
    document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
    document.getElementById('startDate').value = '';
    document.getElementById('endDate').value = '';
    document.getElementById('projectSelect').selectedIndex = -1;
    
    const searchResults = document.getElementById('searchResults');
    if (searchResults) {
        searchResults.innerHTML = '<p style="text-align: center; color: #909399; padding: 40px;">请设置搜索条件后点击搜索</p>';
    }
    
    showToast('搜索条件已重置');
}

// 新建项目
function showNewProjectModal() {
    // 这里可以添加新建项目的模态框
    showToast('新建项目功能开发中...');
}

// Toast 提示
function showToast(message, type = 'success') {
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toastMessage');
    
    if (toast && toastMessage) {
        toastMessage.textContent = message;
        
        // 设置样式
        toast.className = 'toast';
        if (type === 'error') {
            toast.style.backgroundColor = '#f56c6c';
        } else if (type === 'warning') {
            toast.style.backgroundColor = '#e6a23c';
        } else {
            toast.style.backgroundColor = '#67c23a';
        }
        
        toast.classList.add('show');
        
        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }
}

// 工具函数
function formatFileSize(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function formatDate(date) {
    const now = new Date();
    const diff = now - date;
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    
    if (minutes < 60) return `${minutes}分钟前`;
    if (hours < 24) return `${hours}小时前`;
    if (days < 7) return `${days}天前`;
    return date.toLocaleDateString();
}

// 添加样式到预览内容
const previewStyles = `
<style>
.preview-placeholder {
    text-align: center;
    padding: 40px;
}

.preview-icon {
    margin-bottom: 20px;
}

.preview-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 20px 0;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 6px;
    text-align: left;
    max-width: 400px;
    margin: 20px auto;
}

.preview-tags {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0;
}

mark {
    background: #fff3cd;
    padding: 2px 4px;
    border-radius: 2px;
}

.search-results-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
}

.search-results-header h3 {
    color: #303133;
    margin-bottom: 4px;
}

.search-results-header p {
    color: #909399;
    font-size: 14px;
}

.search-result-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-result-item:hover {
    background: #f5f7fa;
    border-color: #409EFF;
}

.result-icon {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
}

.result-content {
    flex: 1;
}

.result-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
    line-height: 1.4;
}

.result-description {
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.result-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #909399;
    margin-bottom: 8px;
}

.result-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.no-results {
    text-align: center;
    padding: 60px;
}
</style>
`;

// 将样式添加到head
document.head.insertAdjacentHTML('beforeend', previewStyles);

console.log('智能文档管理系统原型脚本加载完成');